import {Meta, Canvas, ArgTypes} from '@storybook/blocks';
import * as ConnectionsGraphStories from './ConnectionsGraph.stories';

<Meta of={ConnectionsGraphStories} />

# Connections Graph component

## Description

`ConnectionsGraph` component shows visual representation of the connections between some points — it may be devices, or whatever.

> **There's no predefined layout for the graph!** Use ref or onGraphInit callback argument to set the layout:

    ```javascript
    const onGraphInit = (graph: Core) => {
        graph.layout({name: 'breadthfirst'}).run();
    };

    /**
     * or you can use ref, if you want:
     *
     * const graphRef = useRef();
     *
     * const onGraphInit = () => {
     *     graphRef.current.layout({name: 'circle'}).run();
     * };
     */

    <ConnectionsGraph {...args} onGraphInit={onGraphInit} />;
    ```

### Documentation & examples

https://js.cytoscape.org/

## Props

<ArgTypes of={ConnectionsGraphStories} />

## Demo

<Canvas of={ConnectionsGraphStories.Default} className="graph-canvas" />
